<template>
  <div class="padding-l-20 padding-r-20 padding-t-20">
    <filter-bar>
      <div slot="left-bar">
        <a-input-search
          class="_searchInput position-r"
          placeholder="请输入角色名称"
          enter-button
          @pressEnter="getList(page)"
          @search="getList(page)"
          v-model="name"
        />
      </div>
      <div slot="right-bar">
        <a-button
          class="nbcs-btn nbcs-btn-primary"
          @click="openAddForm"
        >
          新增角色
        </a-button>
      </div>
    </filter-bar>
    <a-table
      :columns="columns"
      :data-source="data"
      :loading="loading"
      :row-key="record => record.id"
      :pagination="pagination"
    >
      <template slot="operation" slot-scope="text, record">
        <a @click="openAssignTree(record)">分配</a>
        <a-divider type="vertical" />
        <a @click="openRoleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm
          v-if="data.length"
          title="确定删除?"
          @confirm="() => onDelete(record.id)"
        >
          <a class="table-red-btn">删除</a>
        </a-popconfirm>
      </template>
    </a-table>
    <add-role-form
      :visible="showAddForm"
      @closeAddForm="closeAddForm"
    ></add-role-form>
    <role-assign-tree
      :visible="showAssignTree"
      :info="roleInfo"
      @closeAssignForm="closeAssignForm"
    ></role-assign-tree>
    <role-edit-form
      :visible="showRoleEdit"
      :info="roleInfo"
      @closeEditForm="closeEditForm"
    ></role-edit-form>
  </div>
</template>
<script>
import FilterBar from "@/layouts/FilterBar";
import { list, del } from "@/services/role";
import AddRoleForm from "./addRoleForm";
import RoleAssignTree from "./roleAssignTree";
import RoleEditForm from "./roleEditForm";

export default {
  name: "role",
  components: { RoleEditForm, RoleAssignTree, AddRoleForm, FilterBar },
  data() {
    return {
      name: "",
      data: [],
      roleInfo: {},
      showAddForm: false,
      showAssignTree: false,
      showRoleEdit: false,
      columns: [
        {
          title: "#",
          width: 50,
          dataIndex: "id",
          key: "#"
        },
        {
          title: "角色",
          dataIndex: "name",
          width: 250,
          scopedSlots: { customRender: "name" }
        },
        {
          title: "角色描述",
          dataIndex: "remark",
          width: 250,
          scopedSlots: { customRender: "remark" }
        },
        {
          title: "操作",
          dataIndex: "operation",
          key: "operation",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
          width: 150
        }
      ],
      loading: false,
      pagination: {
        showQuickJumper: true, //是否可以快速跳转至某页
        hideOnSinglePage: false, //只有一页时是否隐藏分页器
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ["10", "20", "30", "40"], // 每页数量选项
        showTotal: total => `共 ${total} 条记录`, // 显示总数
        showSizeChange: (current, pageSize) => (this.pageSize = pageSize) // 改变每页数量时更新显示
      },
      page: {
        currentPage: 1, //分页
        pageSize: 20 // 默认每页显示数量
      }
    };
  },
  created() {
    this.getList(this.page);
  },
  methods: {
    getList(page, params) {
      this.loading = true;
      list(
        Object.assign(
          {
            page: page.currentPage,
            pageSize: page.pageSize,
            name: this.name
          },
          params
        )
      ).then(res => {
        this.data = res.data.data.list;
        this.loading = false;
      });
    },
    openAddForm() {
      this.showAddForm = true;
    },
    closeAddForm(val) {
      this.showAddForm = val;
      this.getList(this.page);
    },
    onDelete(id) {
      del(
        Object.assign({
          id: id
        })
      ).then(res => {
        if (res.data.code === 0) {
          this.$message.success("删除成功");
          this.getList(this.page);
        }
      });
    },
    openAssignTree(record) {
      this.roleInfo = record;
      this.showAssignTree = true;
    },
    closeAssignForm(val) {
      this.roleInfo = {};
      this.showAssignTree = val;
      this.getList(this.page);
    },
    openRoleEdit(record) {
      this.roleInfo = record;
      this.showRoleEdit = true;
    },
    closeEditForm(val) {
      this.roleInfo = {};
      this.showRoleEdit = val;
      this.getList(this.page);
    }
  }
};
</script>
<style lang="less" scoped>

</style>
